﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Canvas.aspx.cs" Inherits="BugSysSolution.HTML5Info.Canvas" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>HTML5是一个新的HTML标准，上一个版本是4.01，区别有2点，强化了页面的表现性能和引入了一些新的元素或者功能，如果浏览器HTML5标准，那么会减少浏览器对插件的使用，他集成了一些，比如querySelector等等</div>
    <div>
        <canvas id="myCanvas" width="1000" height="600" style="border: 1px solid red"></canvas>
    </div>
    <div>
        <p>
            1:Html5 引入了一个新的<b>canvas</b>标签，这个标签所代表的区域就是一块画布,可以在上面画东西.比如圆,线条,矩形等等</p>
        <p>
            2:光有<b>canvas</b>标签并不能作任何事情,我们还需要一个render对象来渲染上下文,即getContext对象，他提供了各种绘图的API，返回的是一个CanvasRenderingContext2D对象(参数是2d)</p>
        <p>
            canvas元素绘制图像的时候有两种方法: a:context.fill()---->填充</p>
        <p>
            b:context.stroke()---->绘制边框
        </p>
        <p>
            context对图形样式的渲染:fillStyle(填充的样式) and strokeStyle(边框样式) lineWidth (线宽,即边框高度)
        </p>
    </div>
    <div>
        demo:直接看画布,这只是一个简单的demo,还有其他的API没有具体说,比如<a href="http://www.w3school.com.cn/html5/html5_ref_canvas.asp" style="color:Red;" target="_blank">drawImage(),save(),restore()等方法没有具体去写....这是w3cshool的link,API很全</a></div>
    </form>
</body>
</html>
<script type="text/javascript">
    /*矩形
    context.fillRect(x,y,width,height)  
    strokeRect(x,y,width,height)
    x:横坐标(以canvas的左上角为原始起点)
    y:纵坐标
    width:矩形长度
    height:矩形高度

    清除矩形区域
    context.clearRect(x,y,width,height)
    */
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    context.fillRect(0, 0, 100, 100); //如果不设置fillStyle默认是black
    context.strokeRect(120, 0, 100, 100); //如果不设置strokeStyle默认是black
    context.clearRect(60, 25, 100, 50);

    /*圆形
    context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
    x:圆心的x坐标
    y:圆心的y坐标
    straAngle:开始角度
    endAngle:结束角度
    anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针
    */
    context.beginPath();
    context.arc(400, 100, 100, 0, Math.PI * 2, true);
    //不关闭路径路径会一直保留下去
    //context.closePath();
    context.fillStyle = 'rgba(0,255,0,0.25)';
    context.fill();

    /*
    context.beginPath()    
    context.closePath()
    如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
    每次调用context.fill()的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
    如果实在意识模糊了，那么每次画路径都在前后加context.beginPath()和context.closePath()就OK
    */
    context.beginPath();
    context.arc(0, 150, 50, 0, Math.PI / 2, false);
    context.fillStyle = 'red';
    context.fill();
    context.strokeStyle = 'black';
    context.closePath(); //这里如果注释掉，会有奇怪的现象发生
    context.stroke();

    /*
    线
    context.moveTo(x,y)
    context.lineTo(x,y)
    x...y..坐标
    move起点  line终点
    */
    context.beginPath();
    context.strokeStyle = "red";
    context.lineWidth = 8;
    context.moveTo(100, 200);
    context.lineTo(300, 200);
    context.closePath();
    context.stroke();

    /*
    保存图像
    canvas.toDataURL(),把canvas绘制的图形生成一幅图片
    */
    window.open(canvas.toDataURL());
</script>
